<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script type="text/javascript" src="jquery/jquery.js"></script>
		<script type="text/javascript" src="jquery/interface.js"></script>
		<title>Template CI-UMP</title>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="js/map.js"></script>
		<script type="text/javascript" src="js/functions.js"></script>
		<link rel="stylesheet" type="text/css" href="core.css" media="screen" />
		<link  rel="stylesheet" type="text/css" href="menu.css"/>
	</head>

	<body>

		<div id="wrapper">

			<div id="container">
				<div class="container">
					<div class="panel">
						<div class="panel-header">
							Itinéraires
						</div>
						<div class="panel-body">
							<form name="stationForm" method="post" action="stations.php">
						
									<label class="label">Position de départ : </label>
									<input type="text" id="positionStart" name="ville" class="input" />
									 <label class="label">Position d'arrivée : </label>
                    				<select id="ligneSelect" name="ligneSelect" class="input">
										<option value="ump">Présidence de l'UMP</option>
										<option value="ciove">Ciove</option>
										<option value="ensao">Ecole nationale des sciences appliquées Oujda</option>
										<option value="ensah">Ecole nationale des sciences appliquées El Hoceima</option>
										<option value="encgo">Ecole nationale de commerce et de gestion</option>
										<option value="fmpo">Faculté de médecine et de pharmacie</option>
										<option value="lettres">Faculté des lettres et des sciences humaines</option>										
                    				</select>
									<input type="button" id="bTrouver" onclick="drawPath();" value="Trouver" class="button" />
							</form>
						</div>
					</div>
				
					<div class="panel">
						<div class="panel-header">
							Carte Interactive de l'UMP
						</div>
					<div id="slide-menu">
							<div>
							<!--<h3>Etablissements : </h3>-->
								<div id="title-menu">Établissements
								<div id="close"><a href="#!"><img src="images/navi.png" alt="Close" align="right" width="23"></a></div></div>
								<ul class="navigation">

									<li><a href="#!">ENSAO</a></li>
									<li><a href="#!">ENSAH</a></li>
									<li><a href="#!">ENCGO</a></li>
									<li><a href="#!">FMPO</a></li>
								</ul>
						</div>
					</div>
						<div id="CarteGoogle"></div>
						<div id="menu">
						  <div class="menu-container">
						  <div id="push"><a class="menu-item" href="#!" onclick="typeClicked('etablissement',map)"><span>Établissements</span><img src="images/etablissement.png" alt="Établissements" /></a> </div>
						  <a class="menu-item" href="#!" onclick="typeClicked('administration',map)"><span>Administration</span><img src="images/admin.png" alt="Administration" /></a> 
						  <a class="menu-item" href="#!" onclick="typeClicked('amphitheatre',map)"><span>Amphithéâtres</span><img src="images/amphi.png" alt="Amphithéâtres" /></a> 
						  <a class="menu-item" href="#!" onclick="typeClicked('biblios',map)"><span>Bibliothèques</span><img src="images/biblio.png" alt="Bibliothèques" /></a> 
						  <a class="menu-item" href="#!" onclick="typeClicked('sport',map)"><span>Culture et sport</span><img src="images/sport.png" alt="Culture et sport" /></a> 
						  <a class="menu-item" href="#!" onclick="typeClicked('internats',map)"><span>Internats</span><img src="images/autre.png" alt="Autres" /></a> 
						  <a class="menu-item" href="#!" onclick="typeClicked('restos',map)"><span>Aires restaurations</span><img src="images/resto.png" alt="restaurations" /></a> 
						  <a class="menu-item" href="#!" onclick="typeClicked('events',map)"><span>Événements</span><img src="images/event.png" alt="Événements" /></a> 
						  <a class="menu-item" href="#!" onclick="typeClicked('bus',map)"><span>Stations d'autobus</span><img src="images/bus.png" alt="Stations d'autobus" /></a> 
						  <a class="menu-item" href="#!" onclick="typeClicked('parking',map)"><span>Parking</span><img src="images/parking.png" alt="Parking" /></a> 
						  </div>
						</div>
					</div>
						<center><strong>Carte imprimable</strong></center>			
				</div>
			</div>
			<div style="float:right;width:30%;height:100%;overflow:auto">
			  <div id="directions_panel" style="width:100%"></div>
			</div>
		</div>

	</body>
	
<script type="text/javascript">
	//For Menu
	$(document).ready(
		function()
		{
			$('#menu').Fisheye(
				{
					maxWidth: 60,
					items: 'a',
					itemsText: 'span',
					container: '.menu-container',
					itemWidth: 40,
					proximity: 80,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>
<script>
				$(document).ready(function () {
				$('#push, #close').click(function () {
						var $navigacia = $('#slide-menu'), val, opacity;
								if($navigacia.css('opacity') == 0){
									val='250px';
									opacity = 1;
									index = 1000;
								}
								else{
									val = '0px';
									opacity = 0;
									index = 0;
								}
						
						$navigacia.animate({
								opacity: opacity,
								
						}, 300);
						$navigacia.css("z-index",index);
		
				});
		
		});

</script> 
	
</html>
